<footer
	class="pb-16 border-t sm:pb-10"
	[ngClass]="['bg' + contrast, 'text' + defaultInv, 'border' + neutral]"
>
	<div class="container mx-auto space-y-6">
		<div class="px-12 pt-12 space-y-8 md:flex md:justify-between md:px-6 md:space-y-0">
			<div class="flex flex-col my-6 space-y-6 md:m-0">
				<a
					class="flex justify-center space-x-3 md:justify-start"
					rel="noopener noreferrer"
					href="#"
				>
					<svg
						id="Group_11"
						data-name="Group 11"
						xmlns="http://www.w3.org/2000/svg"
						width="35.658"
						height="35.658"
						viewBox="0 0 35.658 35.658"
					>
						<path
							id="Path_7"
							data-name="Path 7"
							d="M4.457,0H31.2a4.457,4.457,0,0,1,4.457,4.457V31.2A4.457,4.457,0,0,1,31.2,35.658H4.457A4.457,4.457,0,0,1,0,31.2V4.457A4.457,4.457,0,0,1,4.457,0Z"
							transform="translate(0 0)"
							fill="#6d28d9"
						/>
						<g id="Group_5" data-name="Group 5" transform="translate(5.244 6.341)">
							<g id="Artboard_1" data-name="Artboard 1">
								<path
									id="Shape_316_1"
									data-name="Shape 316 1"
									d="M539.151,72.067c2.446,4.4,10.223,3.83,12.095,0a6.568,6.568,0,0,1,2.467,1.463c-.091,3.807-2.467,5.169-2.467,5.169l.082.884c2.708-.784,3.717-.7,3.521-5.3,1.361,1.117,2.592,3.237,2.465,4.6-.132,1.416-2.15,5.675-1.9,5.6a92.614,92.614,0,0,1-8.913,3.382A3.093,3.093,0,0,0,544.45,86.1a13.49,13.49,0,0,0-1.883,1.878c-2.477-.9-4.669-1.9-6.96-2.872l-1.8-.663-.819-2.1c-1.1-2.722-1.6-4.238.164-6.627.384-.519,1.053-1.647,1.642-1.894-.115,3.9-1.292,5.756,3.107,5.76l.082-.884s-1.91-.239-2.374-5.169Zm2.188,11.824c-.219.294-.355.368-.573.663.055.147-.218.184-.164.331a3.024,3.024,0,0,0,.9,1.215,2.812,2.812,0,0,0,1.8-1.215C543.084,84.421,541.779,83.658,541.339,83.892Zm5.977,0c-.437.294-.955.7-1.392.994.136.221.846.773.983.994.412.248.312.451.819.221a1.479,1.479,0,0,0,.9-1.325c-.218-.258-.437-.626-.655-.884h-.655Z"
									transform="translate(-531.99 -72.067)"
									fill="#fff"
									fill-rule="evenodd"
								/>
							</g>
							<path
								id="Shape_316_1-2"
								data-name="Shape 316 1"
								d="M560,133.183c-1.328.368-2.544.816-3.986,1.1a33.534,33.534,0,0,1-.412,6.406C557.337,138.675,559.825,135.215,560,133.183Z"
								transform="translate(-539.007 -117.59)"
								fill="#fff"
								fill-rule="evenodd"
							/>
							<path
								id="Shape_316_1-3"
								data-name="Shape 316 1"
								d="M555.6,133.183c1.375.368,2.634.816,4.127,1.1a32.416,32.416,0,0,0,.427,6.406C558.362,138.675,555.787,135.215,555.6,133.183Z"
								transform="translate(-551.328 -117.59)"
								fill="#fff"
								fill-rule="evenodd"
							/>
						</g>
					</svg>
					<span class="self-center text-2xl font-bold">Mamba UI</span>
				</a>
				<p [ngClass]="['text' + plainInv]" class="text-center md:max-w-sm md:text-left">
					We've got {{ roundedComponentTotal }}+ building blocks that can help you create
					almost any type of a website with just a couple of clicks.
				</p>
			</div>
			<div class="flex flex-wrap justify-center lg:space-x-8">
				<div class="p-6 md:py-0">
					<p class="pb-2 text-lg font-medium">Quick links</p>
					<ul class="space-y-1 text-sm" [ngClass]="'text' + neutralInv">
						<li>
							<a
								[routerLink]="['/components']"
								class=""
								[ngClass]="['hover:text' + primary]"
							>
								Components
							</a>
						</li>
						<li>
							<a
								[routerLink]="['/templates']"
								class=""
								[ngClass]="['hover:text' + primary]"
							>
								Templates
							</a>
						</li>
					</ul>
				</div>
				<div class="p-6 md:py-0 md:pr-0">
					<p class="pb-2 text-lg font-medium">Resources</p>
					<ul class="space-y-1 text-sm" [ngClass]="'text' + neutralInv">
						<li>
							<a
								[routerLink]="['/docs']"
								class=""
								[ngClass]="['hover:text' + primary]"
							>
								Documentation
							</a>
						</li>
						<li>
							<a
								[routerLink]="['/docs/credits']"
								class=""
								[ngClass]="['hover:text' + primary]"
							>
								Credits
							</a>
						</li>
						<li>
							<a
								[routerLink]="['/contact']"
								class=""
								[ngClass]="['hover:text' + primary]"
							>
								Contact us
							</a>
						</li>
						<li>
							<a
								href="https://github.com/Microwawe/mamba-ui"
								rel="noopener noreferrer"
								class=""
								[ngClass]="['hover:text' + primary]"
							>
								Star us on GitHub
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="flex flex-col-reverse items-center justify-between p-6 text-center sm:flex-row">
			<p class="mt-3 text-sm sm:mt-0" [ngClass]="['text' + plainInv]">
				©{{ currentYear }} All rights reserved
			</p>
			<div class="flex space-x-2">
				<a
					class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10"
					aria-label="Write me an email"
					[ngClass]="['bg' + primary, 'text' + contrast]"
					rel="noopener noreferrer"
					href="mailto:mirko@mirkonowak.com"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
						class="w-5 h-5"
					>
						<path
							d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
						/>
						<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
					</svg>
				</a>

				<a
					class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10"
					aria-label="Contact via Twitter"
					[ngClass]="['bg' + primary, 'text' + contrast]"
					rel="noopener noreferrer"
					href="https://twitter.com/mamba_ui"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 50 50"
						class="w-5 h-5"
						fill="currentColor"
					>
						<path
							d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"
						></path>
					</svg>
				</a>

				<a
					class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10"
					aria-label="See the code in GitHub"
					[ngClass]="['bg' + primary, 'text' + contrast]"
					rel="noopener noreferrer"
					href="https://github.com/Microwawe/mamba-ui"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="w-6 h-6"
						fill="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
						></path>
					</svg>
				</a>
				<a
					class="flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10"
					aria-label="Support me via Buy me a coffee"
					[ngClass]="['bg' + primary, 'text' + contrast]"
					rel="noopener noreferrer"
					href="https://www.buymeacoffee.com/mambaui"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="w-5 h-5"
						fill="currentColor"
						viewBox="0 0 32 32"
					>
						<path
							d="M9.197 0l-1.619 3.735h-2.407v3.359h0.921l0.943 5.975h-1.473l1.948 10.973 1.249-0.015 1.256 7.973h11.891l0.083-0.531 1.172-7.443 1.188 0.015 1.943-10.973h-1.407l0.937-5.975h1.011v-3.359h-2.557l-1.625-3.735zM9.901 1.073h12.057l1.025 2.375h-14.115zM6.235 4.803h19.525v1.228h-19.525zM6.839 14.136h18.183l-1.568 8.823-7.536-0.079-7.511 0.079z"
						/>
					</svg>
				</a>
			</div>
		</div>
	</div>
</footer>
